<template>
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M11.9998 22C12.6766 21.9995 13.3406 21.8244 13.9214 21.4932C14.5022 21.1621 14.9782 20.6873 15.2989 20.1192C15.314 20.092 15.3214 20.0615 15.3205 20.0307C15.3196 19.9999 15.3104 19.9699 15.2937 19.9435C15.277 19.9171 15.2534 19.8953 15.2253 19.8802C15.1971 19.8651 15.1654 19.8571 15.1331 19.8571H8.86741C8.83506 19.857 8.80323 19.8649 8.77502 19.88C8.74682 19.8951 8.72319 19.9169 8.70645 19.9433C8.68971 19.9697 8.68042 19.9998 8.67949 20.0306C8.67856 20.0614 8.68602 20.0919 8.70115 20.1192C9.02175 20.6872 9.49766 21.162 10.0784 21.4931C10.6591 21.8243 11.3231 21.9994 11.9998 22Z"
      :fill="color" />
    <path
      d="M20.6216 15.8085C20.5438 15.7192 20.4675 15.6299 20.3926 15.5438C19.3622 14.3558 18.7388 13.6388 18.7388 10.2759C18.7388 8.53482 18.3018 7.10625 17.4405 6.03482C16.8054 5.2433 15.9469 4.64286 14.8154 4.19911C14.8008 4.19139 14.7878 4.18126 14.777 4.1692C14.37 2.87009 13.2562 2 12.0001 2C10.744 2 9.63071 2.87009 9.22371 4.16786C9.21285 4.17948 9.20002 4.18928 9.18577 4.19688C6.54519 5.23304 5.26189 7.22098 5.26189 10.2746C5.26189 13.6388 4.63945 14.3558 3.60813 15.5424C3.5332 15.6286 3.45685 15.7161 3.37911 15.8071C3.17828 16.038 3.05103 16.3189 3.01244 16.6165C2.97384 16.9141 3.02551 17.2161 3.16132 17.4866C3.4503 18.067 4.06618 18.4272 4.76918 18.4272H19.2362C19.9359 18.4272 20.5476 18.0674 20.8375 17.4897C20.9739 17.2191 21.0261 16.917 20.9878 16.619C20.9495 16.321 20.8224 16.0397 20.6216 15.8085Z"
      :stroke="color"
      stroke-width="1.5" />
  </svg>
</template>

<script setup lang="ts">
  interface Props {
    size?: number | string;
    color?: string;
    fill?: string;
    strokeWidth?: number | string;
    iconClass?: string;
  }

  withDefaults(defineProps<Props>(), {
    size: 24,
    color: '#7A7A7A',
    fill: 'none',
    strokeWidth: 1,
    iconClass: '',
  });
</script>
